<style type="text/less">
    @import "/web/public/public.less";
    .character-card{
        border:1px dotted #7F7F7F;
        border-radius:8px;
        padding: 17px 12px;
        font-size: 14px;
        color: #7f7f7f;
        position: relative;
        .avatar-wrap{
            width: 78px;
            height: 78px;
            overflow: hidden;
            border-radius: 50%;
            position: absolute;
            top: 17px;
            right: 15px;

            img{
                width: 100%;
                height: 100%;
            }
        }
        .name-wrap{
            font-size: 16px;
            .clearfix();
            color: #3563d5;
            //line-height: 36px;
            line-height: 30px;
            .name{
                .fl();
                height: 30px;
                vertical-align: middle;
            }
            .job{
                height: 30px;
                text-align: center;
                font-size: 14px;
                .fl();
                border: 1px solid #3664D6;
                position: relative;
                border-radius: 5px;
                padding: 0 12px;
                margin-left: 10px;
                //.bg('/web/img/icon_dialog-blue.png');

                &:before{
                    display: inline-block;
                    content: ' ';
                    width: 8px;
                    height: 8px;
                    position: absolute;
                    box-sizing:border-box;
                    left: -5px;
                    top: 50%;
                    margin-top: -4px;
                    border-left: 1px solid #3664D6;
                    border-bottom: 1px solid #3664D6;
                    transform: rotate(45deg);
                    background: #ffffff;

                }
            }
        }
        .total-article{
            line-height: 50px;
            span{
                color: #e60012;
                font-weight: bold;
            }
        }
        .intro{
            line-height: 28px;
        }

        .recent-article{
            .title{
                color: #3563d5;
                font-size: 16px;
                border-bottom: none;
                border-top: 1px dotted #7F7F7F;
                margin-top: 20px;
                text-align: center;
                line-height: 50px;
            }
            ul.article-list{
                .clearfix;
                &>li{
                    padding-bottom: 20px;
                    &+li{
                        margin-top: 20px;
                    }
                    .article-title{
                        font-size: 14px;
                        color: #6e6e6e;
                        margin-bottom: 10px;
                        line-height: 24px;

                        &:before{
                            content: '·';
                            font-weight: bold;
                            margin-right: 6px;
                        }
                        a{
                            color: inherit;
                            display: inline-block;
                            width: 256px;
                            vertical-align: top;
                        }
                    }

                    .tag-list{
                        width: 210px;
                        height: 20px;
                        overflow: hidden;
                        .fl;
                        &>li{
                            .fl;
                            color: #878787;
                            font-size: 12px;
                            padding: 4px 8px;
                            background-color: #F0F0F0;
                            border-radius: 10px;
                            margin-left: 10px;

                            a{
                                color: inherit;
                            }
                        }
                    }
                    .release-time{
                        .fr;
                        font-size: 12px;
                        color: #3563d5;
                        line-height: 20px;
                    }
                }
            }
            .read-more{
                display: block;
                width:140px;
                height:35px;
                line-height: 35px;
                border:1px solid #3563D5;
                color: #3563d5;
                border-radius:6px;
                text-align: center;
                font-size: 14px;
                margin: 20px auto 0;
            }
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<div class="character-card">
    <div class="avatar-wrap">
        <#if authorImage??>
            <img src="${authorImage}" alt="${name}">
        <#else>
            <img src="" alt="人物头像">
        </#if>
    </div>
    <div class="name-wrap">
        <div class="name">${name}</div>
        <div class="job">${authorPost!""}</div>
    </div>
    <div class="total-article">
        共 <span>${articleCount}</span> 篇文章
    </div>
    <div class="intro" id="character-card-intro">
        ${authorIntro!""}
    </div>
    <div class="recent-article">
        <div class="title">最新更新文章</div>
        <#if latestArticles?? && (latestArticles?size>0)>
            <ul class="article-list">
                <#list latestArticles as article>
                    <li>
                        <div class="article-title"><a href="${article.articleUrl}" target="_blank" title="${article.articleTitle}">${article.articleTitle}</a></div>
                        <ul class="tag-list">
                            <#if article.articleKeywordList?? && (article.articleKeywordList?size>0)>
                                <#list article.articleKeywordList as articleKeyword>
                                    <li>
                                        <a href="${"${domain}/web/tagList/1.html?tag=${articleKeyword.keyword}"}" target="_blank" class="tag" title="${articleKeyword.keyword}">${articleKeyword.keyword}</a>
                                    </li>
                                </#list>
                            </#if>
                        </ul>
                        <div class="release-time">${(article.publicTime)?string("MM-dd")}</div>
                    </li>
                </#list>
            </ul>
        </#if>
        <a class="read-more" href="${domain}/web/author-post-list.html?id=${articlePromoterId?c}" target="_blank" title="更多">阅读我的更多文章</a>
    </div>
</div>
